<template>
    <div class="container">
        <div class="video-container">
            <img class="video-stream" :src="videoSrc2" />
        </div>
        <div class="controls">
            <button class="camera-btn" @click="toggleCameraSelection">
                选择摄像头
            </button>
            <select v-if="showCameraSelection" v-model="selectedCamera">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
            <button v-if="showCameraSelection" class="submit-btn" @click="submitCameraSelection">提交</button>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { invade_close_click, monitor_close_click, register_close_click, track_close_click } from "@/api/close";
/**
 * 钩子函数实时调用
 */
onMounted(() => {
    close(); // 调用你的函数
});
function close() {

    register_close_click().then((response) => {

        var res = response.data
        if (res.respCode === '000000') {
            //ElMessage.success('关闭成功');
        } else {
            ElMessage.error(res.respMsg);
        }
    })
        .catch((error) => {
            console.error(error);
            ElMessage.error('关闭失败，请重试');
        });
    invade_close_click().then((response) => {
        var res = response.data
        if (res.respCode === '000000') {
            //ElMessage.success('关闭成功');
        } else {
            ElMessage.error(res.respMsg);
        }
    })
        .catch((error) => {
            console.error(error);
            ElMessage.error('关闭失败，请重试');
        });
    track_close_click().then((response) => {
        var res = response.data
        if (res.respCode === '000000') {
            //ElMessage.success('关闭成功');

        } else {
            ElMessage.error(res.respMsg);
        }
    })
        .catch((error) => {
            console.error(error);
            ElMessage.error('关闭失败，请重试');
        });
    monitor_close_click().then((response) => {
        var res = response.data
        if (res.respCode === '000000') {
            //ElMessage.success('关闭成功');

        } else {
            ElMessage.error(res.respMsg);
        }
    })
        .catch((error) => {
            console.error(error);
            ElMessage.error('关闭失败，请重试');
        });
}
//----------------------初始视频流-----------------------------
const videoSrc = ref('http://127.0.0.1:8000/api/video_recognize/1');

const showCameraSelection = ref(false);
const selectedCamera = ref('');

function toggleCameraSelection() {
    showCameraSelection.value = !showCameraSelection.value;
    selectedCamera.value = '';
}

function submitCameraSelection() {

    let selectedCameraValue = selectedCamera.value; // 从 <select> 元素中获取选中的值

    if (selectedCameraValue === '1') {

        videoSrc2.value = 'http://127.0.0.1:8000/api/video_recognize/1';
        // videoReg1();
        showCameraSelection.value = false;
        selectedCamera.value = '';
    } else if (selectedCameraValue === '2') {
        // videoReg2();
        videoSrc2.value = 'http://127.0.0.1:8000/api/video_recognize/2';
        showCameraSelection.value = false;
        selectedCamera.value = '';
    } else if (selectedCameraValue === '3') {
        // videoReg3();
        videoSrc2.value = 'http://127.0.0.1:8000/api/video_recognize/3';
        showCameraSelection.value = false;
        selectedCamera.value = '';
    } else if (selectedCameraValue === '4') {
        // videoReg4();
        videoSrc2.value = 'http://127.0.0.1:8000/api/video_recognize/4';
        showCameraSelection.value = false;
        selectedCamera.value = '';
    }
}
</script>

<style scoped>
.refresh-btn {
    float: right;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.camera-btn {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 10px;
}

.submit-btn {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.controls {
    display: flex;
    flex-direction: column;
}

.video-container {
    width: 50%;
}

.video-stream {
    width: 100%;
}
</style>